<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('地区列表')" />
	<style>
		.selected{background: #d6d5d5;color: #ed5565; }
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
	        <div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success" onclick="editAreaLeft()" shiro:hasPermission="system:area:add">
					<i class="fa fa-plus"></i> 添加
				</a>
			</div>
			<div class="btn-group-sm" id="toolbar2" role="group">
				<a class="btn btn-success" onclick="editArea()" shiro:hasPermission="system:city:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-danger" onclick="$.operate.removeAll()" shiro:hasPermission="system:city:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
			</div>

			<div class="col-sm-6 select-table table-striped" style="width: 32%; margin-right: 1%;">
				<table id="bootstrap-table" ></table>
			</div>
			<div class="col-sm-6 select-table table-striped" style="width: 67%;">
				<table id="bootstrap-table2" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var areaaddFlag = [[${@permission.hasPermi('system:area:add')}]];
        var areaeditFlag = [[${@permission.hasPermi('system:area:edit')}]];
        var arearemoveFlag = [[${@permission.hasPermi('system:area:remove')}]];
        var cityaddFlag = [[${@permission.hasPermi('system:city:add')}]];
        var cityeditFlag = [[${@permission.hasPermi('system:city:edit')}]];
        var cityremoveFlag = [[${@permission.hasPermi('system:city:remove')}]];
        var userViewFlag = [[${@permission.hasPermi('system:user:view')}]];
        var prefix = ctx + "system/area";
		var prefixCity = ctx + "system/city";
		var area1 = [];
		var areaCode1 = 1;

        $(function() {
            var options1 = {
                id:"bootstrap-table",
                showSearch: false,
                showRefresh: false,
                showColumns: false,
                showToggle: false,
                pagination: false,
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                modalName: "地区",
                toolbar: "toolbar",
                columns: [
					{
						field : 'areaCode',
                        visible: false,
					},
					{
						field : 'areaName',
						title : '大区',
                        width:'150',
                        formatter: function(value, row, index) {
                  			if(row.level != 0){
                  				return "&nbsp;&nbsp;&nbsp;&nbsp;" +row.areaName;
                  			}
                            return row.areaName;
                        }
					},
					{
						field : 'childs',
                        width:'50',
						title : '下级区</br>域数',
					},
					{
						field : 'role',
						width:'50',
						title : '岗位是否</br>已设置',
					},
                    {
                        title: '操作',
                        align: 'center',
                        width:'280',
                        formatter: function(value, row, index) {
                            var actions = '';
                            actions += '<div style="width: 160px;margin:0 auto">';
                            if(row.level != 0){
                                actions += '<a class="btn btn-success btn-xs ' + areaeditFlag + '" href="javascript:void(0)" onclick="editAreaLeft('+row.areaCode+',\'edit\')"><i class="fa fa-edit"></i>编辑</a> ';
	                            actions += '<a class="btn btn-danger btn-xs ' + arearemoveFlag + '" href="javascript:void(0)" onclick="$.operate1.remove(' + row.areaCode + ')"><i class="fa fa-remove"></i>删除</a>';
                            }
                           	actions += '<a class="btn btn-warning btn-xs ' + areaeditFlag + '" href="javascript:void(0)" onclick="editAreaLeft('+row.areaCode+',\'view\')"><i class="fa fa-eye"></i>查看</a> ';
                            actions += '<a class="btn btn-info btn-xs ' + userViewFlag + '" href="javascript:void(0)" onclick="userNd('+row.areaCode+',\'userNd1\')"><i class="fa fa-role"></i>岗位人员设置</a>';
                            actions += '</div>';
                            return actions;
                        }
                    }
				],
                rowStyle:function rowStyle(row, index){
                    if (row.areaCode == areaCode1){
                        return {classes:'selected'}
                    }else{
                        return '';
                    }
                },
                onClickRow:function (row,$element) {
                    areaCode1 = row.areaCode
                    // $('#bootstrap-table2').bootstrapTable('refresh',{url: prefix + "/list/leve3?code="+row.areaCode});
                    $('#bootstrap-table2').bootstrapTable('refresh',{
                        url:  prefix + "/list/leve3",
                        query:queryParams({
                            pageNum: 1,
                            code: areaCode1
                        })
					});
                    $(".selected").removeClass("selected");
                    $($element).toggleClass('selected');//添加class
                },
            };
            var options2 = {
                id:"bootstrap-table2",
                showSearch: false,
                showRefresh: false,
                showColumns: false,
                showToggle: false,
                pagination: true,
                url: prefix + "/list/leve3",
                queryParams:queryParams,
                removeUrl: prefix + "/remove",
                modalName: "地区",
                toolbar: "toolbar2",
                method:"post",
                columns: [
                    {
                    checkbox: true
                },
                    {
                        field : 'areaCode',
                        visible: false,
                        cardVisible: false,
                    },
                {
                    field : 'areaName',
                    title : '区域',
                    width:'160'
                },
                {
                    field : 'areaNames',
                    title : '所属大区'
                },
                {
                    field : 'city',
                    title : '区域所包含省市',
                    width:'260'
                },
                {
                    field : 'status',
                    title : '状态'
                },
                {
                    field : 'role',
                    title : '岗位人员是<br>否是设置'
                },
                {
                    title: '操作',
                    align: 'center',
					width:'260',
                    formatter: function(value, row, index) {
                        var actions = '';
                        actions += '<div style="width:205px;margin:0 auto">';
                        actions += '<a class="btn btn-warning btn-xs ' + cityeditFlag + '" href="javascript:void(0)" onclick="editArea('+row.areaCode+',\'view\')"><i class="fa fa-eye"></i>查看</a> ';
                        actions += '<a class="btn btn-success btn-xs ' + cityeditFlag + '" href="javascript:void(0)" onclick="editArea('+row.areaCode+',\'edit\')" ><i class="fa fa-edit"></i>修改</a> ';
                        actions += '<a class="btn btn-info btn-xs ' + userViewFlag + '" href="javascript:void(0)" onclick="userNd('+row.areaCode+',\'userNd2\')"><i class="fa fa-role"></i>岗位人员设置</a>';
                        actions += '</div>';
                        return actions;
                    }
                }
                ],
            };

            $.table1.init(options1);
			$.table.init(options2);
        });



        // left 左侧编辑，添加，查看
        function editAreaLeft(id,type){
            var url=prefix + "/add" ;
            var btn = ['确定', '关闭'];
            var title = '添加区域';
            if(type=='view'){
                url = prefix + "/add?areaCode="+id
                btn = ['关闭']
				title="查看区域"
			}else if(type=='edit'){
                url = prefix + "/add?areaCode="+id
				title="修改"
			}else if(type=='remove'){
                url = prefix + "/remove?areaCode="+ids
				title="修改"
			}

            var index = layer.open({
                type: 2,
                area:  ['1000px',"80%"],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: title,
                content: url,
                btn: btn,
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    if(type=='view'){
                        layer.close(index);
					}else{
                        if(!$(".layui-layer-btn0").hasClass("layui-btn-disabled")) {
                            //$(".layui-layer-btn0")这个是确定按钮
                            $(".layui-layer-btn0").addClass("layui-btn-disabled");
                            var iframeWin = layero.find('iframe')[0];
                            iframeWin.contentWindow.submitHandler1(function () {
                                $.table1.refresh();
                                layer.close(index);
                            });
                        }
					}
                },
                cancel: function(index) {
                    return true;
                }
            });
        }

        // 右侧编辑，添加，查看
        function editArea(id,type){
            var url=prefixCity + "/add?parentCode=" + areaCode1 ;
            var btn = ['确定', '关闭'];
            var title = '添加区域';
            if(type=='view'){
                url = prefixCity + "/add?areaCode="+id+"&parentCode=" + areaCode1 ;
                btn = ['关闭']
				title="查看区域"
			}else if(type=='edit'){
                url = prefixCity + "/add?areaCode="+id+"&parentCode=" + areaCode1 ;
				title="修改"
			}

            var index = layer.open({
                type: 2,
                area:  ['1000px',"80%"],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: title,
                content: url,
                btn: btn,
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    if(type=='view'){
                        layer.close(index);
					}else{
                        if(!$(".layui-layer-btn0").hasClass("layui-btn-disabled")) {
                            $(".layui-layer-btn0").addClass("layui-btn-disabled");
                            var iframeWin = layero.find('iframe')[0];
                            iframeWin.contentWindow.submitHandler(function () {
                                $.table.refresh();
                                $.table1.refresh();
                                layer.close(index);
                            });
                        }


					}

                },
                cancel: function(index) {
                    return true;
                }
            });
        }
        
        /*岗位人员设置*/
		function userNd(id,userNd) {
		    var url = ctx + "system/user/nd/userArea?areaCode="+id+"&userNd=" + userNd;
		    createMenuItem(url, "岗位人员设置");
		}
        function queryParams(params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                // limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                pageSize: this.pageSize,
                pageNum: this.pageNumber,
                code: areaCode1
            };
            return temp;
        }

    </script>
</body>
</html>
